<template>
  <div class="song-lyric">
    <h1 class="lyric-title">歌词界面</h1>
    <!-- 有歌词 -->
    <ul class="has-lyric" v-if="lyr.length" key="index">
      <li v-for="(item,index) in lyr" v-bind:key="index">
        {{item[1]}}
      </li>
    </ul>
    <!-- 没有歌词 -->
    <div v-else class="no-lyric" key="no-lyric">
      <span>暂无歌词</span>
    </div>
  </div>
</template>

<script>
import {mixin} from '@/mixins'
import {mapGetters} from 'vuex'
export default {
    name: 'lyric',
    mixins: [mixin],
    components: {},
    props: {},
    data () {
      return {
        lyr: []             // 当前歌曲的歌词
      }
    },
    computed: {
      ...mapGetters([
        'curTime',          // 当前歌曲播放的位置
        'id',               // 当前歌曲的 id
        'lyric',            // 当前歌曲的歌词
        'listIndex',        // 当前歌曲在歌单中的位置
        'listOfSongs'       // 当前歌单列表
      ])
    },
    watch: {
      // 监听歌曲 id 变化
      id:function(){
        this.lyr = this.parseLyric(this.listOfSongs[this.listIndex].lyric)
      },
      // 监听歌词变化 当播放到该歌词时更改该歌词颜色
      curTime: function(){
        if(this.lyr.length>0){
          for(let i=0;i<this.lyr.length;i++){
            if(this.curTime>=this.lyr[i][0]){
              for(let j=0;j<this.lyr.length;j++){
                document.querySelectorAll('.has-lyric li')[j].style.color = '#000';
                document.querySelectorAll('.has-lyric li')[j].style.fontSize = '15px';
              }
              if(i>=0){
                document.querySelectorAll('.has-lyric li')[i].style.color = '#95d2f6';
                document.querySelectorAll('.has-lyric li')[i].style.fontSize = '25px';
              }
            }
          }
        }
      },
    },
    created () {
      this.lyr = this.lyric;
    },
    methods: {
    },
}
</script>
<style lang="scss" scoped>
@import '@/assets/css/lyric.scss';
</style>